<template>
  <el-dialog
    top="30px"
    width="80%"
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="d-flex justify-content-center align-items-center mb-5">
      <el-button @click="lastQuarter" :disabled="lastdisable">
        <i class="el-icon-arrow-left el-icon--right"></i>
        <span>上一季度</span>
      </el-button>
      <div class="mx-3">{{ dateLabel }}</div>
      <el-button @click="nextQuarter" :disabled="nextdisable">
        <span>下一季度</span>
        <i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
    </div>
    <g7 v-bind="$attrs" :query-year="year" :query-quarter="quarter" @close="beforeClose"></g7>
  </el-dialog>
</template>

<script>
import { enumQuarter, isQuarterDisabled } from '@/credit/views/city/reportCity/manage/quarter/minix'
import G7 from '@/credit/views/city/reportCity/manage/quarter/g7'

export default {
  components: {
    G7,
  },
  props: {
    visible: Boolean,
  },
  data() {
    return {
      year: '',
      quarter: '',
    }
  },
  computed: {
    viewMode() {
      return this.$attrs['view-mode']
    },
    queryYear() {
      return this.$attrs['query-year']
    },
    queryQuarter() {
      return this.$attrs['query-quarter']
    },
    dateLabel() {
      return `${this.year}年 / 第${enumQuarter[this.quarter]}季度`
    },
    lastdisable() {
      let quarter = this.quarter
      let year = this.year
      if (this.quarter > 1) {
        quarter = this.quarter - 1
      } else {
        quarter = 4
        year--
      }
      return isQuarterDisabled(year, quarter)
    },
    nextdisable() {
      let quarter = this.quarter
      let year = this.year
      if (this.quarter > 3) {
        quarter = 1
        year++
      } else {
        quarter++
      }
      return isQuarterDisabled(year, quarter)
    },
  },
  watch: {
    queryYear: {
      handler: function () {
        this.year = this.queryYear
      },
      immediate: true,
    },
    queryQuarter: {
      handler: function () {
        this.quarter = this.queryQuarter
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    lastQuarter() {
      let quarter = this.quarter
      let year = this.year
      if (this.quarter > 1) {
        quarter = this.quarter - 1
      } else {
        quarter = 4
        year--
      }
      if (!isQuarterDisabled(year, quarter)) {
        this.year = year
        this.quarter = quarter
      }
    },
    nextQuarter() {
      let quarter = this.quarter
      let year = this.year
      if (this.quarter > 3) {
        quarter = 1
        year++
      } else {
        quarter++
      }
      if (!isQuarterDisabled(year, quarter)) {
        this.year = year
        this.quarter = quarter
      }
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
